<template>
  <div>
    <h3>软件2351学生表</h3>
    <select v-model="showType">
      <option value="table">table</option>
      <option value="card">card</option>
    </select>
    <table v-if="showType == 'table'" class="table table-striped table-hover">
      <thead>
        <tr>
          <td>序号</td>
          <td>学号</td>
          <td>姓名</td>
          <td>性别</td>
          <td>JavaScript</td>
          <td>java</td>
          <td>Python</td>
          <td>数据结构</td>
          <td>线性代数</td>
          <td>总分</td>
        </tr>
      </thead>
      <tbody>
        <student-table v-for="(stu, index) in students" :key="index" :student="stu"></student-table>
      </tbody>
    </table>
    <student-card
      v-if="showType == 'card'"
      v-for="(stu, index) in students"
      :key="index"
      :student="stu"
    ></student-card>
  </div>
</template>

<script>
import students from '@/api/students'
import StudentTable from './StudentTable.vue'
import StudentCard from './StudentCard.vue'
export default {
  components: {
    StudentCard,
    StudentTable,
  },

  data() {
    return {
      showType: '',
      students: students,
    }
  },
}
</script>

<style lang="scss" scoped></style>
